<template>
<div class="border-1 bg-0  center" style="width:78%">
    <div class="text-r mg-2"><img src="../../assets/icon/x.svg" alt="" @click="centershow " ></div>
    <div style="margin:0 5% 5%">
      <div class="flex-s-between">
        <!-- <div class="flex-dc-s-al flex-1" style="height:388px"> -->
        <div class="flex-dc-s-al flex-1">
          <div class="fontW-7 color-af47 font-36" style="margin:15px 0 0 0">{{$t('buypage.groupBuyStatus')}}</div>
          <div class="flex">
            <div style="width:55%" ><img src="../../assets/img/sell.jpg" alt="" style="width:100%"></div>
            <div class="flex-dc-s-al mgl-20" style="margin-top:-20px">
              <div>
                <p class="font-30 fontW-9 color-af47">Super shoe</p>
                <p class="font-26 fontW-9 color-af47">#3461</p>
              </div>
              <div>
                <p class="font-20 fontW-7 color-fe50">{{$t('buypage.group')}}<img style="width:20px;margin-bottom:5px" class="mgr-10" src="../../assets/ETH/IMEETNFT.svg" alt=""></p>
                <p class="font-36 fontW-7 color-f">298.32</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-dc-s-between flex-1">
          <div style="width:20%"><img src="../../assets/img/tx1.svg" alt="" style="width:100%"></div>
          <p class="font-25 fontW-7 color-f mgb-10">Joha bro</p>
          <div>
            <p class="font-20 fontW-7 color-f text-c mgtb-10">{{$t('buypage.groupTips')}}</p>
            <div class="flex-n-center">
           <div style="width:25%" class="flex bg-f border-r pdlr-10">
              <el-input v-model="input1" placeholder="0.05" style="width:70%" class="font-25 fontW-7"></el-input>
              <div class="font-25 fontW-7 color-0 h-40">%</div>
           </div>
              <div class="font-25 fontW-7 color-f mlr-20">≈</div>
              <div style="width:40%"><el-input v-model="input2" placeholder="100" class="font-25 fontW-7"></el-input></div>
            </div>
              <div class="flex-n-center mgt-5">
               <div style="width:25%" class="flex bg-f border-r pdlr-10 opacity-0">
              <el-input v-model="input1" placeholder="0.05" style="width:70%" class="font-25 fontW-7"></el-input>
              <div class="font-25 fontW-7 color-0 h-40">%</div>
            </div>
                <div class="font-25 fontW-7 color-f mlr-20">≈</div>
              <div class="font-14 fontW-7 color-f flex-s-between" style="width:40%"><div >ETH</div><div>0.23</div></div>
            </div>
          </div>
            <div class="flex-s-between font-14 fontW-7 color-f" style="width:75%"><div>2</div><div>200</div></div>
            <div class="block border-r" style="width:75%" ><el-slider v-model="value2" :min="2" :max="200" class="bg-ffc4"></el-slider></div>
          <div class="font-15 fontW-7 color-f mgb-20">{{$t('buypage.groupPersonSetting')}}</div>
          <el-button type="primary" style="width:75%;border:0" class="bg-ffc4 color-f font-f-ib font-26 fontW-7 btnHove border-r" >{{$t('buypage.paybtn')}}</el-button>
        </div>
      </div>
      <div class="mgt-30">
        <div class="font-20 fontW-7 color-f">{{$t('set_broker.rule')}}</div>
        <div class="font-20 fontW-7 color-f">1、{{$t('set_broker.grouPpeople')}}</div>
        <div class="font-20 fontW-7 color-f">2、{{$t('set_broker.text_2')}}</div>
        <div class="font-20 fontW-7 color-f">3、{{$t('set_broker.text_3')}}</div>
        <div class="font-20 fontW-7 color-f">4、{{$t('set_broker.text_4')}}</div>
        <div class="font-20 fontW-7 color-f">5、{{$t('set_broker.agent')}}</div>
        <div class="font-20 fontW-7 color-f">6、{{$t('set_broker.text_6')}}</div>
      </div>
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      value2: 120,
      input1: '',
      input2: '',
      centerS: false
    }
  },
  methods: {
    centershow: function () {
      this.centerS = false
      this.$emit('oncenSHow', this.centerS)
    }
  }
}
</script>
<style lang="less"  scoped>
/deep/.el-input__inner{
  padding:0;
  border: none;
  text-align: right;
  padding-right: 10px;
}
/deep/.el-slider__runway{
  margin: 0;
  // background: #fe66c4;
  .el-slider__bar,.el-slider__button{
    background: #fe66c4;
  }
}
/deep/.el-button--primary:focus,.el-button--primary:hover {
  background: #fe66c4;
  color: #fff;
  border: 0;
}
</style>
